<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="always">
        <!-- 顶部表单栏 -->
        <el-form :inline="true" class="demo-form-inline">
          <el-row type="flex" class="row-bg" justify="space-around">
            <el-col class="search_area">
              <el-form-item label="关键字">
                <el-input
                  v-model="textWord"
                  placeholder="根据编号搜索"
                  size="small"
                  @keyup.enter.native="onSearch"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col>
              <el-row type="flex" justify="end">
                <el-form-item>
                  <el-button
                    type="button"
                    class="el-button el-button--default el-button--small"
                    @click="clearSearchText"
                    >清除</el-button
                  >
                  <el-button
                    type="primary"
                    @click="onSearch"
                    size="small"
                    float="left"
                    >搜索</el-button
                  >
                </el-form-item>
              </el-row>
            </el-col>
          </el-row>
        </el-form>
        <!-- / 顶部表单栏 -->
        <!-- 消息提示 -->
        <el-alert
          type="info"
          class="alert"
          :closable="false"
          show-icon
          :title="totalText"
        ></el-alert>
        <!-- / 消息提示 -->
        <!-- 数据渲染区域 -->
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{
            'background-color': '#fafafa',
            'border-bottom': '2px solid #e8e8e8'
          }"
        >
          <el-table-column prop="id" label="编号" width="240">
          </el-table-column>
          <el-table-column
            prop="questionType"
            :formatter="formatterType"
            label="题型"
          >
          </el-table-column>
          <el-table-column label="题目编号" width="240">
            <template slot-scope="scope">
              <div v-for="(val, index) in scope.row.questionIDs" :key="index">
                <a
                  @click="onQuestionPreview(val)"
                  href="javascript:;"
                  style="color: rgb(0, 153, 255)"
                  >{{ val.number }}</a
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间" width="170">
          </el-table-column>
          <el-table-column prop="totalSeconds" label="答题时间(s)">
          </el-table-column>
          <el-table-column prop="accuracyRate" label="正确率(%)">
          </el-table-column>
          <el-table-column prop="userName" label="录入人"> </el-table-column>
          <!-- <el-table-column label="操作" width="60">
            <el-button type="danger">危险按钮</el-button>
          </el-table-column> -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                class="deleteBtn"
                type="danger"
                icon="el-icon-delete"
                circle
                @click="randomDelete(scope.$index, scope.row)"
              >
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- / 数据渲染区域 -->
        <!-- 分页器 -->
        <div class="block">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="20"
            layout="sizes,prev,pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <!-- / 分页器 -->
        <!-- 题组弹出层 -->
        <QuestionsPreview
          :answerDetailData="answerDetailData"
          :dialogTableVisible="dialogTableVisible"
          @close="dialogTableVisible = false"
        />
        <!-- / 题组弹出层 -->
      </el-card>
    </div>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from "@/api/hmmm/questions";
import QuestionsPreview from "@/module-hmmm/components/questions-preview";
export default {
  name: "QuestionsRandoms",
  components: {
    QuestionsPreview
  },
  data() {
    return {
      tableData: [], //数据存放列表
      keyWord: "", //提交时实时关键字
      textWord: "", //搜索框关键字
      pagesize: 20, //分页数
      totalText: "", //获取数据总数显示文本
      total: null, //获取总数
      currentPage: 1, //当前页码
      //-------------以下为弹出层专用属性
      answerDetailData: {}, //题目详情数据对象
      dialogTableVisible: false, //弹出层
      isSearch: false //是否开启搜索
    };
  },

  created() {
    this.getData();
  },
  methods: {
    //格式化学科类型，把1-3转化为单选多选简答
    formatterType(row, column) {
      if (row.questionType == 1) {
        return "单选";
      } else if (row.questionType == 2) {
        return "多选";
      } else {
        return "简答";
      }
    },
    //获取数据
    async getData() {
      try {
        const { data } = await randoms({
          page: this.currentPage, //当前页数
          pagesize: this.pagesize, //每页页数
          keyword: this.keyword //输入框中的内容
        });
        this.tableData = [];
        this.tableData.push(...data.items);
        this.total = data.counts;
        this.totalText = `数据一共 ${data.counts} 条`;
        console.log("请求的所有数据数据:", data);
        console.log("数组中的数据:", this.tableData);
      } catch (err) {
        console.log(err);
      }
    },
    onSearch() {
      this.keyword = this.textWord;
      this.getData();
      this.currentPage = 1;
    },
    //清除按钮,清空输入框
    clearSearchText() {
      this.keyword = "";
      this.textWord = "";
    },
    //分页数发生变化
    handleSizeChange(val) {
      this.pagesize = val;
      this.currentPage = 1;
      this.getData();
      console.log(`每页 ${this.pagesize} 条`);
    },
    //当前页发生变化
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
      console.log(`当前页: ${this.currentPage}`);
    },
    //删除列表项
    async randomDelete(index, row) {
      const confirmRes = await this.$confirm(
        "此操作将永久删除该文件, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(err => err);
      if ("cancel" === confirmRes) {
        return this.$message.info("已经取消了删除");
      } else {
        const arr = row.id.split(""); //把带字母的请求ID变成数组展开
        arr.splice(0, 1);
        const str = arr.join("");
        try {
          // console.log("test", str);
          const res = await removeRandoms(str);
          console.log("删除ID参数：", str);
          this.tableData.splice(index, 1);
          this.totalText = `数据一共 ${--this.total} 条`;
          console.log(res);
          this.$message.success("删除成功");
          if (this.tableData.length == 0) {
            if (this.currentPage > 1) {
              this.currentPage--;
            }
            this.onSubmit();
          }
        } catch (err) {
          console.log(err);
          this.$message.info("删除失败");
        }
      }
    },
    async onQuestionPreview(val) {
      this.dialogTableVisible = true;
      console.log(val);
      try {
        const { data } = await detail(val);
        this.answerDetailData = data;
        console.log(this.answerDetailData);
      } catch (err) {
        console.log(err);
      }
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.app-container {
  .search_area {
    margin-left: 30px;
  }
  .alert {
    margin-bottom: 20px;
  }
  .deleteBtn {
    color: #f56c6c;
    background: #fef0f0;
    border-color: #fbc4c4;
  }
  .deleteBtn:hover {
    color: #fef0f0;
    background: #f56c6c;
  }
  .block {
    padding-top: 20px;
  }
}
</style>
